/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-06 10:45:48
 * @LastEditors: renmengxue
 * @LastEditTime: 2023-12-06 11:48:26
 */
import { createApp, h, render } from 'vue'
import Message from './Message.vue'// 把封装好的message引入进来
export type MessageType = 'success' | 'error' | 'default'// 因为Message是以.vue为后缀名的，不能导入类型，所以在这里在写一遍
const CreateMessage = (message:string, type:MessageType, timeout?: number) => {
  // message 代表传递过来的内容文案信息
  // type代表的是传递过来的类型
  // timeout 2s自动关闭
// 利用h函数创建一个虚拟的messageVnode
  const messageVnode = h(
    // 第一个参数是组件对象
    // 第二个参数是组件对象的props
    Message,
    {
      message,
      type
    }
  )
  // 既然要把messageInstance挂载到一个节点上，可以使用mount挂在一个  eg:app.mount('div) 就是把app挂载到div上，这样就可以显示在界面上
  // 这里我们新建一个节点，使用dom 的一些方法
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)// 把节点加入到body中
  render(messageVnode, mountNode)

  // 完成关闭的方法
  const destroy = () => {
    render(null, mountNode)// 卸载
    document.body.removeChild(mountNode)
  }
  if (timeout) {
    setTimeout(() => {
      destroy()
    }, timeout)
  }
  return {
    destroy
  }
}

export default CreateMessage

/**
 * 难点：如何用函数的形式创建组件
 * 之前都是在组件template里面实例化一个组件的
 * 在main.js里从vue里面导入过来的createApp可以生成一个组件的实例
 */
